<template>
	<view class="container">
		<view class="ui-all">
			<view class="avatar">
				<view class="imgAvatar">
					<u-avatar size="60" :src="avatar"></u-avatar>
				</view>
			</view>
			<view class="ui-list">
				<text>昵称</text>
				<input type="text" :placeholder="nic" v-model="truename" placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>手机号</text>
				<input type="tel" :placeholder="shoji" v-model="phone" placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>地址</text>
				<input type="text" :placeholder="diz" v-model="addr" placeholder-class="place" />
			</view>
			<button class="save" @tap="savaInfo">保 存 修 改</button>
		</view>

	</view>
</template>

<script>
	import {
		changeUser
	} from "@/static/js/api/personal.js"
	import {
		pageCenter
	} from "../../static/js/api/my.js"
	export default {
		data() {
			return {

				truename: '', //昵称
				phone: '', //手机号
				addr: '', //地址


				nic: '请输入昵称',
				shoji: '请输入手机号',
				diz: '请输入地址',

				avatar: '',
				getUser: ''
			}
		},
		mounted() {
			this.get()
		},
		methods: {
			async get() {
				this.getUser = await pageCenter()
				this.nic = this.getUser.data.nongdanFillingUserPo.truename
				this.avatar = this.getUser.data.nongdanFillingUserPo.avatar
				this.diz = this.getUser.data.nongdanFillingUserPo.addr
				this.shoji = this.getUser.data.nongdanFillingUserPo.phone
			},
			async savaInfo() {
				let truename = this.truename
				let phone = this.phone;
				let addr = this.addr
				if (!this.truename) {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none',
						duration: 2000
					});
					return;
				} else if (!this.phone) {
					uni.showToast({
						title: '手机号码有误，请重填',
						icon: 'none',
						duration: 2000
					});
				} else if (!this.addr) {
					uni.showToast({
						title: '请填写地址',
						icon: 'none',
						duration: 2000
					});
				} else {
					let obj = {
						truename,
						phone,
						addr,
					}
					uni.showLoading({
						title: "加载中"
					});
					let res = await changeUser(obj).then(res => {
						setTimeout(res => {
							uni.navigateBack()
						}, 1000)
					})
				}
			},
		},
	}
</script>

<style lang="less">
	.container {
		display: block;
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			width: 400rpx;
			height: 60rpx;
			background: #1478FF;
			border-radius: 30rpx;
			color: #ffffff;
			margin-top: 80rpx;
			font-size: 28rpx;
			line-height: 60rpx;
		}
	}
</style>